<template>
        <!-- <form @submit.prevent="userLogin">
            <label for="usr">用户名：</label>
            <input type="text" id="usr" v-model="username">
            <br>
            <label for="psd">密码：</label>
            <input type="password" id="psd" v-model="password">
            <br>
            <input type="submit">
        </form> -->
        <!-- <el-container width="200px">
            <el-header>
                <h3>用户登录</h3>
            </el-header>
            <el-main>
                <el-form :inline="true" class="demo-form-inline" :model="login">
                <el-form-item label="名称">
                    <el-input v-model="login.username"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-input v-model="login.password"></el-input>
                </el-form-item>
                </el-form>
            </el-main>
        </el-container> -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>用户登录</span>
                <el-button style="float: right; padding: 3px 0" type="text">取消</el-button>
            </div>
            <div>
                <el-form class="demo-form-inline" :model="login" :label-position="labelPosition" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="login.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="login.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="userLogin">提交</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
</template>
<script>
export default {
    data(){
        return {
            labelPosition:'right',
            login:{
                username:"",
                password:''
            }

        }
    },
    methods:{
        userLogin(){
            if(this.login.username == "admin" && this.login.password == "123456"){
            //     // vue中的跳转功能:this.$router.push()
                this.$router.push("/");

            //     // 本地存储
            //     // local:本地；storage:存储
            //     // .setItem()：设置本地存储的内容
                // localStorage.setItem("usr",this.username)
            }
        }
    }
}
</script>
<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
    margin: 200px auto;
}
</style>